<template>
    <div class="page-wrap page-wrap-ql">
        <div class="page-cont">
            <a-page-header @back="handleBack">
                <template #title> {{ systemName }}-{{ versionNumber }}{{ type === '1' ? '计划产品' : '上线' }}需求</template>
            </a-page-header>
            <div style="padding: 24px">
                <a-table bordered rowKey="id" size="small" :loading="loading" :columns="tableColumns" :data-source="list" :pagination="false">
                    <template #requireType="{ record }">
                        {{ $filters.valToNameFilter('requireType', record.requireType) }}
                    </template>
                    <template #requireDesc="{ text }">
                        <div style="white-space: pre-wrap" v-html="text" />
                    </template>
                    <template #expectTime="{ text }">
                        {{ $filters.dateFilter(text) }}
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { useRouterApi } from '@/hooks/common/useRouterApi';
import api from '@/api';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
export default defineComponent({
    setup() {
        const { handleBack, route } = useRouterApi({
            backQuery: {
                path: '/energyManage/analysisReport'
            }
        });
        const tableColumns = [
            {
                title: '产品需求名称',
                dataIndex: 'requireName'
            },
            {
                title: '需求类型',
                dataIndex: 'requireType',
                width: 120,
                slots: { customRender: 'requireType' }
            },
            {
                title: '简述',
                dataIndex: 'requireDesc',
                width: 600,
                slots: { customRender: 'requireDesc' },
                ellipsis: true
            },
            {
                title: '预计完成时间',
                dataIndex: 'expectTime',
                width: 160,
                slots: { customRender: 'expectTime' }
            }
        ];

        const state = reactive<any>({
            loading: false,
            list: [],
            systemName: '',
            versionNumber: '',
            type: ''
        });
        const setText = (html) => {
            let txt: any = document.createElement('div');
            txt.innerHTML = html;
            const content = txt.innerText || txt.textContent;
            txt = null;
            return content;
        };
        const getList = async () => {
            const query = {
                ids: route.query.ids
            };
            const { success, moule } = await api.productRequireModel.findProductsByIds(query);
            if (success) {
                state.list = [...moule];
                if (moule.length) {
                    state.versionNumber = moule[0].relateVersionNumber;
                }
            }
        };
        getList();
        state.systemName = route.query.systemName;
        state.type = route.query.type;
        return {
            tableColumns,
            ...toRefs(state),
            handleBack,
            setText
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
.desc-content {
    img {
        max-width: 400px;
        max-height: 400px;
    }
}

// 去掉表头颜色
::v-deep(.ant-table-thead) > tr > th {
    background: #eaf5fe !important;
    font-weight: 400;
    color: @primary-color;
}
::v-deep(.ant-divider) {
    border-top: 2px solid #eaf5fe;
}
::v-deep(.ant-table-row) {
    p {
        margin: 0;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        img {
            height: 300px;
        }
    }
}
</style>